<template>
	<view>
		<view class="sticky-top">
			<view class="search-content">
				<view class="search">
					<image src="@/static/imgs/sou.png" mode=""></image>
					<input class="sm-mn"
						placeholder-style='color:#b2b2b2;font-size:26rpx;height:70rpx;line-height:70rpx' type="text"
						@confirm="onSearch" @input="onInput" confirm-type="搜索" v-model="searchVal"
						placeholder="请输入用户信息或者订单编号">
					<image v-show="searchVal" @tap="clearSearch" class="close" src="@/static/imgs/close.png" mode="">
					</image>
				</view>
			</view>
			<view class="integral-tab">
				<view :class="['integral-item',{'act':intindex===index}]" v-for="(item,index) in orderlist" :key="index"
					@click="orderchange(index)">{{item}}</view>
			</view>
		</view>
		<view class="order-list">
			<view class="order-item" v-for="(item,index) in data" :key="index">
				<view class="order-tit">
					<view class="order-time">订单编号：{{item.orderid}}</view>
					<view class="order-state1" v-if="item.paystatus==0">待付款</view>
					<!-- <view class="order-state1" v-if="item.paystatus==1">已付款</view> -->
					<view class="order-state1" v-if="item.paystatus==1">待发货</view>
					<view class="order-state2" v-if="item.paystatus==2">待收货</view>
					<view class="order-state2" v-if="item.paystatus==3">确认收货</view>
					<view class="order-state2" v-if="item.paystatus==4">订单取消</view>
					<!-- <view class="order-state1" v-if="item.status==2">用户取消订单</view>
					<view class="order-state2" v-if="item.status==3">代收点已取货</view>
					<view class="order-state2" v-if="item.status==4">代收点已取消</view>
					<view class="order-state2" v-if="item.status==5">厂家已接货</view>
					<view class="order-state2" v-if="item.status==6">厂家待送货</view>
					<view class="order-state2" v-if="item.status==7">用户已取货</view>
					<view class="order-state2" v-if="item.status==10">用户已送货</view>
					<view class="order-state2" v-if="item.status==11">商家已接单</view>
					<view class="order-state2" v-if="item.status==12">商家已存货</view> -->
				</view>
				<view class="order-tit">
					<view class="order-time">姓名：{{item.name}}</view>
					<!-- <view class="order-time">电话：{{item.telphone}}</view> -->
				</view>
				<view class="order-li-box">
					<view class="order-li-item">
						<view v-if="item.thumbimage!=null">
							<image :src="item.thumbimage" v-if="item.thumbimage.indexOf('http') != -1"></image>
							<image :src="'https://fucaiji.yiyunvip.top'+item.thumbimage" v-else></image>
						</view>
						<view class="order-li-ri">
							<view class="shop-tit">{{item.goods_name}}</view>
							<view class="shop-pri">
								<view>￥{{item.price}}</view>
								<view>X {{item.num}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="order-li-yh">
					<view>优惠{{item.xdtime}}</view>
					<view class="order-yh-pri">-￥5</view>
				</view> -->
				<view class="order-operation">
					<view class="order-num">下单 共{{item.num}}件 <view>￥{{item.money}}</view>
					</view>
				</view>
				<view class="order-operation">
					<view class="order-num"></view>
					<view class="order-opera-btn">
						<!-- <view class="order-btn2" v-if="item.status==10 && is_pick == false" @click="pick(item.id,item.cabinetid,item.user_number)">取货</view> -->
						<!-- <view class="order-btn2" v-if="item.status==10 && is_pick == true" style="background: #cccccc;color:#000000">取货</view> -->
						<!-- <view class="order-btn1" v-if="(item.status==10 || item.status == 1) && is_cancel == false"
							@click="cancel(item.id)">取消订单</view>
						<view class="order-btn1" v-if="(item.status==10 || item.status == 1) && is_cancel == true"
							style="background: #cccccc;color:#000000">取消订单</view> -->
						<!-- 	<view class="order-btn1" v-if="item.status==6 && is_delivery == false" @click="delivery(item.id,item.cabinetid)">送货</view>
						<view class="order-btn1" v-if="item.status==6 && is_delivery == true" style="background: #cccccc;color:#000000">送货</view>
						<view class="order-btn1" v-if="item.status==6 && is_shaos == false" @click="shaos(item.id,item.cabinetid)">查看并送货</view>
						<view class="order-btn1" v-if="item.status==6 && is_shaos == true" style="background: #cccccc;color:#000000">查看并送货</view>
						<view class="order-btn1" v-if="item.status==3 && item.equipment_number == '' && is_shao == false" @click="shao(item.id)">绑定防盗扣</view> -->
						<!-- <view class="order-btn1" v-if="item.status==3 && item.equipment_number == '' && is_shao == true" style="background: #cccccc;color:#000000">绑定防盗扣</view> -->
						<view class="order-btn1" @click="detail(item.id)">查看详情</view>
					</view>
				</view>
			</view>
			<u-empty text="暂无订单" mode="order" margin-top="200" v-if="data==''"></u-empty>
		</view>
		<u-popup v-model="show" mode="bottom" height="700rpx" border-radius="15">
			<view class="pd15">
				<view>上传图片：</view>
				<view class="" style="display: flex;flex-wrap: wrap;">
					<view class="mt10 flex mr10" v-for="(item,index) in imgPath" v-if="imgPath!=''"
						@click="previewImage()" style="position: relative;">
						<image :src="item" mode="" style="width: 180rpx;height: 180rpx;"></image>
						<image src="@/static/images/img_del.png" mode="" @click.stop="deleteimg(index)"
							style="width: 36rpx;height: 36rpx;position: absolute;top:6rpx;right: 6rpx;"></image>
					</view>
					<view class="upload-box" @click="uploadimg()"></view>
				</view>
				<view class="cl-w tijiaobtn" v-if="imgPath" @click="tijiao()">确认提交</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import urlsa from '@/siteinfo';
	let timer = null;
	export default {
		data() {
			return {
				intindex: 0,
				orderlist: ['全部', '未支付', '已支付'],
				data: [],
				page: 0,
				pagesize: 10,
				searchVal: '',
				keywords: '',
				show: false,
				imgPath: [],
				is_pick: false,
				is_cancel: false,
				is_delivery: false,
				is_shaos: false,
				is_shao: false
			};
		},
		onLoad(option) {
			if (option.status > 0) {
				this.intindex = parseInt(option.status)

			} else {
				this.intindex = 0;

			}
		},
		//下拉刷新
		// onPullDownRefresh() {
		// 	this.ordertab(this.intindex)
		// },
		//加载更多
		// onReachBottom() {
		// 	this.ordertab(this.intindex)
		// },
		onShow() {
			var that = this;
			that.is_pick = false;
			that.is_cancel = false;
			that.is_delivery = false;
			that.is_shaos = false;
			that.is_shao = false;
			that.page = 0
			that.data = [];
			that.ordertab(that.intindex)
		},
		methods: {
			// 绑定设备口
			shao(id) {
				var that = this;
				that.is_shao = true
				uni.scanCode({
					success: function(res) {

						var number = res.result;
						that.global.request.post({
							data: {
								do: 'Binding',
								id: id,
								number: number,

							},
							success: res => {
								uni.showToast({
									title: res.message,
									icon: "none"
								})
								setTimeout(() => {
									that.is_shao = false
									that.page = 0
									that.data = [];
									that.ordertab(that.intindex)
								}, 1000);
							},
							fail: res => {
								that.is_shao = false
							}
						})
					}
				});

			},
			// 扫码查看订单详情并打开柜子
			shaos(id, cabinetid) {
				var that = this;
				that.is_shaos = false
				uni.scanCode({
					success: function(res) {
						var number = res.result;
						that.global.request.post({
							data: {
								do: 'ShopOpen',
								id: id,
								cabinetid: cabinetid,
								type: 'stock',
							},
							success: res => {
								uni.showToast({
									title: "开门成功",
									icon: "none"
								})
								that.is_shao = false
								that.page = 0
								that.data = [];
								that.ordertab(that.intindex)
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/orderDetail/orderDetail?id=" +
											id + '&type=shangjia'
									})
								}, 1000);
								// that.show = true;
								// that.id = id;
								// that.action = 'shop_stock';
							},
							fail() {
								that.is_shaos = false
							}
						})

					}
				});

			},
			// 键盘搜索
			onSearch() {
				let that = this;
				that.keywords = that.searchVal;
				that.page = 0
				that.data = [];
				that.ordertab(that.intindex)
			},
			// 修改状态
			orderchange(index) {
				var that = this;
				that.page = 0;
				that.data = [];
				that.intindex = index;
				that.ordertab(that.intindex)
			},
			// 查看详情
			detail(id) {
				uni.navigateTo({
					url: "/pages/shop/orderDetail?id=" + id + '&type=shangjia'
				})
			},
			// 输入防抖搜索
			onInput() {
				let that = this;
				// 输入不及时
				setTimeout(() => {
					that.keywords = that.searchVal;
				}, 0);
				// 防抖
				if (timer !== null) {
					clearTimeout(timer);
				}
				timer = setTimeout(() => {
					that.page = 0
					that.data = [];
					that.ordertab(that.intindex)
				}, 1000);
			},
			// 商家取货
			pick(id, cabinetid, boxNo) {
				var that = this;
				that.is_pick = true;
				uni.showToast({
					title: "打开柜子请上传详细照片",
					icon: "none"
				})
				setTimeout(function() {
					that.global.request.post({
						data: {
							do: 'ShopOpen',
							id: id,
							cabinetid: cabinetid,
							boxNo: boxNo,
							type: 'pick',

						},
						success: res => {
							console.log(res);
							uni.showToast({
								title: "开门成功",
								icon: "none"
							})
							that.is_pick = false
							that.show = true;
							console.log(that.show)
							that.id = id;
							that.action = 'shop_pick';
						},
						fail: res => {
							that.is_pick = false
						}
					})
				}, 1000)
			},
			// 商家存货
			delivery(id, cabinetid) {
				var that = this;
				that.is_delivery = true
				uni.showToast({
					title: "打开柜子请上传详细照片",
					icon: "none"
				})
				setTimeout(function() {
					that.global.request.post({
						data: {
							do: 'ShopOpen',
							id: id,
							cabinetid: cabinetid,
							type: 'stock',
						},
						success: res => {
							uni.showToast({
								title: "开门成功",
								icon: "none"
							})
							that.is_delivery = false
							that.page = 0;
							that.imgPath = []
							that.data = []
							that.show = false
							that.ordertab(that.intindex)
							// that.show = true;
							// that.id = id;
							// that.action = 'shop_stock';
						},
						fail: res => {
							that.is_delivery = false
						}
					})
				}, 1000)
			},
			// 存取保存
			tijiao() {
				var that = this;
				this.global.request.post({
					data: {
						do: 'Uploads',
						action: that.action,
						id: that.id,
						imgpath: that.imgPath.join(",")
					},
					success: res => {
						uni.showToast({
							title: res
						})
						that.page = 0;
						that.imgPath = []
						that.data = []
						that.show = false
						that.ordertab(that.intindex)
					}
				})
			},
			uploadimg() {
				uni.chooseImage({
					count: 6,
					sizeType: ['original', 'compressed'],
					success: res => {
						var token = uni.getStorageSync("token");
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								header: {
									'token': token,
								},
								url: urlsa.siteroot + '/app/index.php?op=reg&i=' + urlsa.uniacid +
									'&a=wxapp&c=entry&m=lh_shop&v=1&do=upload_img', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'upfile',
								success: (uploadFileRes) => {
									this.imgPath.push(JSON.parse(uploadFileRes.data).datas)
								}
							});
						}

					}
				});
			},
			deleteimg(index) {
				var that = this;
				uni.showModal({
					content: '确认删除该图片吗？',
					success: function(res) {
						if (res.confirm) {
							that.imgPath.splice(index, 1);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			previewImage(type) {
				uni.previewImage({
					urls: this.imgPath,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {},
						fail: function(err) {}
					}
				});
			},
			// 清除搜索框
			clearSearch() {
				this.searchVal = '';
				this.keywords = '';
				this.page = 0
				this.data = []
				this.ordertab(this.intindex)
			},
			ordertab: function(index) {
				this.intindex = index
				var paystatus = ''
				if (index == 0) {
					paystatus = 'all'
				} else {
					paystatus = index - 1
				}
				var that = this;
				this.global.request.post({
					data: {
						do: 'shangjia',
						op: 'ordlist',
						paystatus: paystatus,
						s_id: uni.getStorageSync("s_id"),
						keywords: that.keywords,
						page: that.page,
						pagesize: that.pagesize,
					},
					success: res => {
						for (var i = 0; i < res.length; i++) {
							if (this.$u.test.jsonString(res[i].info)) {
								res[i].info = JSON.parse(res[i].info)
							}
						}
						that.data = that.data.concat(res)
						that.page = that.page + 1
					}
				})
			},
			// 商家取消订单
			cancel(id) {
				var that = this;
				that.is_cancel = true;
				uni.showModal({
					title: '提示',
					content: "是否确认取消订单",
					success: function(con) {
						if (con.confirm) {
							that.global.request.post({
								data: {
									do: 'ShopCancel_order',
									id: id
								},
								success: res => {
									uni.showToast({
										title: res
									})
									that.is_cancel = false;
									that.page = 0
									that.data = []
									that.ordertab(that.intindex)

								},
								fail: res => {
									that.is_cancel = false;
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg;
	}

	.sticky-top {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.integral-tab {
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 88upx;
		background: #fff;
		font-size: 30upx;
		color: #2c2c2c;
		box-shadow: 0 2upx 15upx rgba($color: #000000, $alpha: .05);
		z-index: 991;

		.integral-item {
			width: 115upx;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
		}

		.act {
			color: #EB702D;
			border-bottom: 4upx solid #EB702D;
		}
	}

	.bar {
		height: 88upx;
	}

	.order-list {

		padding-top: 210rpx;



		.order-item {
			padding: 0 30upx;
			background-color: #fff;
			margin-bottom: 24upx;

			.order-tit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25upx 0;
				border-bottom: 1upx solid #F2F2F4;
				font-size: 26upx;
				color: #6a6a6a;

				.order-state1 {
					font-size: 30upx;
					color: #FD7A4D;
				}

				.order-state2 {
					font-size: 30upx;
					color: #999;
				}
			}

			.order-li-box {
				padding-bottom: 24upx;
				border-bottom: 1upx solid #F2F2F4;

				.order-li-item {
					display: flex;
					align-items: center;
					padding-top: 24upx;

					image {
						width: 130upx;
						height: 130upx;
					}

					.order-li-ri {
						width: 540upx;
						margin-left: 25upx;

						.shop-tit {
							font-size: 30upx;
							color: #333;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.shop-pri {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 50upx;
							font-size: 28upx;
						}
					}
				}
			}

			.order-li-yh {
				display: flex;
				justify-content: space-between;
				font-size: 26upx;
				padding: 20upx 0;

				.order-yh-pri {
					color: #FD7A4D;
				}
			}

			.order-operation {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20upx 0;

				.order-num {
					display: flex;
					font-size: 28upx;
					color: #6A6A6A;

					view {
						margin-left: 20upx;
						color: #ff0000;
					}
				}

				.order-opera-btn {
					display: flex;

					view {
						padding: 4upx 25upx;
						font-size: 28upx;
						color: #fff;
						margin-left: 20upx;
						border-radius: 20upx;
					}

					.order-btn1 {
						background-color: #EB702D;
					}

					.order-btn2 {
						background-color: #AAAAAA;
					}
				}
			}
		}
	}

	.buy-trea {
		position: fixed;
		top: 30%;
		left: 20%;
		width: 60%;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		z-index: 997;
		// transform: translate3d(0, 120%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.trea-mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 994;
	}

	.text {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.buy-trea image {
		margin-bottom: 20rpx;
		width: 300rpx;
		height: 300rpx;
	}

	.tishi {
		color: red;
		font-size: 20rpx;
		text-align: center;
	}

	.search-content {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
	}

	.search {
		width: 100%;
		height: 70rpx;
		// margin-left:20rpx;
		background-color: #F8F8F8;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
	}

	.search input {
		width: 75%;
	}

	.search image {
		width: 40rpx;
		height: 40rpx;
		margin: 0 15rpx;
	}

	.close {
		width: 30rpx;
		height: 30rpx;
	}

	.upload-box {
		margin-top: 20rpx;
		width: 180rpx;
		height: 180rpx;
		border: 1px solid #d9d9d9;
		position: relative;
	}

	.upload-box::before {
		width: 2px;
		height: 39.5px;
	}

	.upload-box::after {
		width: 39.5px;
		height: 2px;
	}

	.upload-box::before,
	.upload-box::after {
		content: " ";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #d9d9d9;
	}

	.tijiaobtn {
		background: #FD7A4D;
		border-radius: 50rpx;
		text-align: center;
		width: 80%;
		padding: 10rpx 0;
		margin: 0 auto;
		margin-top: 40rpx;
	}
</style>
